<template>
  <view>
    <view class="living-list-container">
      <view id="living-list-all" class="living-list-block">
        <view v-for="(item, index) in livingList" :key="index" class="living-list-out">
          <living-item :show-video="false" :item-data="item" @toLivingRoom="toLivingRoom" />
        </view>
      </view>
    </view>
    <base-list-state :list-length="listLength" :list-query="{page_no: listQuery.pageNo, page_size: listQuery.pageSize}" :list-state="listState" :list-empty="listEmpty" />
  </view>
</template>
<script>
import livingItem from './living-item'
export default {
  components: {
    livingItem
  },
  props: {
    userId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      listQuery: {
        pageSize: 10,
        pageNo: 1
      },
      listState: {
        loading: true,
        more: true
      },
      listEmpty: { type: 'empty_list', text: '暂无数据' },
      // view_type: ~ 自营商品、2 ~ 素材圈、3~ 直播、4~碧划算、5~箱起
      livingList: []
    }
  },
  computed: {
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.livingList.length
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.listQuery = {
        pageSize: 10,
        pageNo: 1,
        liveTags: '全部'
      }
      if (this.userId) {
        this.listQuery.userId = this.userId
      }
      this.listState.loading = false
      this.listState.more = true
      this.livingList = []
      this._getRecommend()
    },
    async _getRecommend() {
      if (this.listState.loading || !this.listState.more) return
      this.listState.loading = true
      const res = await this.$api.materialApi.getLiveRoundAll(this.listQuery)
      if (res.success) {
        if (this.listQuery.pageNo === 1) {
          this.livingList = []
        }
        if (res.data && res.data.records.length < this.listQuery.pageSize) {
          this.listState.more = false
        }
        this.livingList = this.livingList.concat(res.data.records)
      }
      this.listState.loading = false
      this.$emit('getCommendData', this.livingList.length > 0)
    },
    loadMore() {
      if (this.listState.loading || !this.listState.more) return
      this.listQuery.pageNo++
      this._getRecommend()
    },
    toLivingRoom(item) {
      this.$emit('toLivingRoom', item)
    },
    getViewType(type) {
      let text = ''
      switch (type) {
        case 1:
          text = '商品'
          break
        case 2:
          text = '素材圈'
          break
        case 3:
          text = '直播'
          break
        case 4:
          text = '碧划算'
          break
        case 5:
          text = '箱起'
          break
        default:
          break
      }
      return text
    }
  }
}
</script>
<style lang="scss">
.living-list-container{
  .living-list-block {
    box-sizing: border-box;
    // margin-bottom: 16rpx;
  }
  .living-list-out {
    background-color: #fff;
    overflow: hidden;
    padding: 15rpx;
    margin-top: 16rpx;
    &:nth-child(1) {
      margin-top: 0;
    }
  }
}
.loading-tip {
  text-align: center;
  color: #666;
  font-size: 24rpx;
  padding: 20rpx  0;
}
</style>
